<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>消息通知</title>
    <link rel="stylesheet" href="../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../assets/module/admin.css?v=311"/>
</head>
<body>

<!-- 加载动画，移除位置在common.js中 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">效果演示</div>
                <div class="layui-card-body layui-form text-center" style="padding: 60px 0 35px 0;">
                    <div>
                        <div style="display: inline-block;margin: 0 10px 20px 0;">
                            <button id="btn1" class="layui-btn">成功消息</button>
                            <button id="btn2" class="layui-btn layui-btn-warm">警告消息</button>
                        </div>
                        <div style="display: inline-block;margin: 0 10px 20px 0;">
                            <button id="btn3" class="layui-btn layui-btn-danger">失败消息</button>
                            <button id="btn4" class="layui-btn layui-btn-normal">通知消息</button>
                        </div>
                    </div>
                    <div style="margin-top: 40px;">
                        <div style="display: inline-block;margin: 0 10px 20px 0;">
                            <button id="btnMsg1" class="layui-btn layui-btn-primary">成功提示</button>
                            <button id="btnMsg2" class="layui-btn layui-btn-primary">警告提示</button>
                        </div>
                        <div style="display: inline-block;margin: 0 10px 20px 0;">
                            <button id="btnMsg3" class="layui-btn layui-btn-primary">错误提示</button>
                            <button id="btnMsg4" class="layui-btn layui-btn-primary">加载提示</button>
                        </div>
                    </div>
                    <div class="layui-text" style="margin-top: 40px;">
                        更多参数说明请查看<a href="https://easyweb.vip/doc/" target="_blank">开发文档</a>！
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-sm12 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">自定义参数</div>
                <div class="layui-card-body layui-form text-center" style="padding: 60px 0;">
                    <div>
                        <div style="display: inline-block;margin: 20px 20px 20px 0;">
                            &emsp;&emsp;位置：
                            <div style="width: 150px;display: inline-block;">
                                <select id="noticePosition">
                                    <option value="topLeft">topLeft</option>
                                    <option value="topRight">topRight</option>
                                    <option value="bottomLeft">bottomLeft</option>
                                    <option value="bottomRight">bottomRight</option>
                                    <option value="topCenter">topCenter</option>
                                    <option value="bottomCenter ">bottomCenter</option>
                                    <option value="center">center</option>
                                </select>
                            </div>
                        </div>
                        <div style="display: inline-block;margin: 0 20px 20px 0;">
                            &emsp;进度条：
                            <div style="width: 150px;display: inline-block;">
                                <select id="noticeProgress">
                                    <option value="true">显示</option>
                                    <option value="false">不显示</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div style="display: inline-block;margin: 0 20px 20px 0;">
                            进入动画：
                            <div style="width: 150px;display: inline-block;">
                                <select id="noticeIn">
                                    <option value="bounceInLeft">bounceInLeft</option>
                                    <option value="bounceInRight">bounceInRight</option>
                                    <option value="bounceInUp">bounceInUp</option>
                                    <option value="bounceInDown">bounceInDown</option>
                                    <option value="fadeIn">fadeIn</option>
                                    <option value="fadeInDown">fadeInDown</option>
                                    <option value="fadeInUp">fadeInUp</option>
                                    <option value="fadeInLeft">fadeInLeft</option>
                                    <option value="fadeInRight">fadeInRight</option>
                                    <option value="flipInX">flipInX</option>
                                </select>
                            </div>
                        </div>
                        <div style="display: inline-block;margin: 0 20px 20px 0;">
                            退出动画：
                            <div style="width: 150px;display: inline-block;">
                                <select id="noticeOut">
                                    <option value="fadeOut">fadeOut</option>
                                    <option value="fadeOutUp">fadeOutUp</option>
                                    <option value="fadeOutDown">fadeOutDown</option>
                                    <option value="fadeOutLeft">fadeOutLeft</option>
                                    <option value="fadeOutRight">fadeOutRight</option>
                                    <option value="flipOutX">flipOutX</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div style="margin-top: 20px;">
                        <button id="btn5" class="layui-btn layui-btn-normal">显示通知</button>
                        <button id="btn6" class="layui-btn layui-btn-normal">关闭所有</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- js部分 -->
<script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../assets/js/common.js?v=311"></script>
<script>
    layui.use(['form', 'notice', 'code'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var notice = layui.notice;

        $('#btn1').click(function () {
            notice.success({
                title: '消息通知',
                message: '你有新的消息，请注意查收!'
            });
        });

        $('#btn2').click(function () {
            notice.warning({
                title: '消息通知',
                message: '你有新的消息，请注意查收!'
            });
        });

        $('#btn3').click(function () {
            notice.error({
                title: '消息通知',
                message: '你有新的消息，请注意查收!'
            });
        });

        $('#btn4').click(function () {
            notice.info({
                title: '消息通知',
                message: '你有新的消息，请注意查收!'
            });
        });

        $('#btn5').click(function () {
            notice.info({
                title: '消息通知',
                message: '你有新的消息，请注意查收!',
                position: $('#noticePosition').val(),
                transitionIn: $('#noticeIn').val(),
                transitionOut: $('#noticeOut').val(),
                progressBar: $('#noticeProgress').val() == 'true'
            });
        });

        $('#btn6').click(function () {
            notice.destroy();
        });

        $('#btnMsg1').click(function () {
            notice.msg('This is a message of success', {icon: 1});
        });

        $('#btnMsg2').click(function () {
            notice.msg('This is message of warning', {icon: 3});
        });

        $('#btnMsg3').click(function () {
            notice.msg('This is a message of error', {icon: 2});
        });

        $('#btnMsg4').click(function () {
            notice.msg('Action in progress..', {icon: 4});
            setTimeout(function () {
                notice.destroy();
            }, 6000);
        });

    });
</script>
</body>
</html>